<template>
	<view class="funds">
		<bigSearch></bigSearch>
		<view class="nav">
			<view class="wrap">
				<navigator hover-class="none" :url="item.path" class="navitem" v-for="(item,index) in navList" :key="index" >
					<image mode="widthFix" :src="item.imgSrc" style="width: 45rpx; margin-bottom: 15rpx;"></image>
					<text>{{item.title}}</text>
				</navigator>
			</view>
		</view>
		<view class="adv">
			<navigator hover-class="none">
				<image src="../../static/images/funds/advNew2x.png" mode="widthFix" style="width: 100%;"></image>
			</navigator>
		</view>
		<view class="content">
			<fundTitle title="稳中优选" des="适合新手投资 稳重求进"></fundTitle>
			<view class="contentwrap">
				<view class="itemwrap">
					<view @click="changeActive(index)" :class="item.isActive?'titleitem active':'titleitem' " v-for="(item,index) in contentList1">{{item.title}}</view>
				</view>
				<view class="tabwrap">
					<swiper :current="currentIndex" :autoplay="false" :duration="500" style="height: 400rpx;">
						<swiper-item>
<!-- 稳中优选内容渲染的地方+++++++++++++++++++++++++++++++++++++++++++++++ -->
							<view class="detailContent">
								<view class="detailItem">
									<image style="width: 70rpx;" src="../../static/images/funds/toup2x.png" mode="widthFix"></image>
									<view class="interest">
										<view class="title">11.76<text>%</text></view>
										<text class="time">近一年</text>
									</view>
									<view class="tag">
										<view class="title">
											股债双利 理财升级
										</view>
										<view class="des">
											中银多策略灵活配置混合A
										</view>
									</view>
								</view>
								<view class="detailItem">
									<image style="width: 70rpx;" src="../../static/images/funds/toup2x.png" mode="widthFix"></image>
									<view class="interest">
										<view class="title">11.76<text>%</text></view>
										<text class="time">近一年</text>
									</view>
									<view class="tag">
										<view class="title">
											股债双利 理财升级
										</view>
										<view class="des">
											中银多策略灵活配置混合A
										</view>
									</view>
								</view>
								<view class="detailItem">
									<image style="width: 70rpx;" src="../../static/images/funds/toup2x.png" mode="widthFix"></image>
									<view class="interest">
										<view class="title">11.76<text>%</text></view>
										<text class="time">近一年</text>
									</view>
									<view class="tag">
										<view class="title">
											股债双利 理财升级
										</view>
										<view class="des">
											中银多策略灵活配置混合A
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							2
						</swiper-item>
						<swiper-item>
							3
						</swiper-item>
					</swiper>
				</view>
			</view>
			<fundTitle title="收益进取" des="收益进阶 历史业绩亮眼"></fundTitle>
			<view class="contentwrap">
				<view class="itemwrap">
					<view @click="changeActive1(index)" :class="item.isActive?'titleitem active':'titleitem' " v-for="(item,index) in contentList2">{{item.title}}</view>
				</view>
				<view class="tabwrap">
					<swiper :current="currentIndex1" :autoplay="false" :duration="500" style="height: 734rpx;">
<!-- 收益进取内容渲染的地方+++++++++++++++++++++++++++++++++++++++++++++++ -->					
						<swiper-item>
							<view class="youyiItem">
								<image style="width: 100rpx; margin-right: 20rpx; margin-top: 40rpx;" src="../../static/images/funds/toup2x.png" mode="widthFix"></image>
								<view class="message">
									<view class="msg-top">
										<view class="title">投研副总挂帅 聚焦新能源</view>
										<view class="des">中欧先制造出股票C</view>
									</view>
									<view class="msg-bottom">
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
									</view>
								</view>
							</view>
							<view class="youyiItem">
								<image style="width: 100rpx; margin-right: 20rpx; margin-top: 40rpx;" src="../../static/images/funds/toup2x.png" mode="widthFix"></image>
								<view class="message">
									<view class="msg-top">
										<view class="title">投研副总挂帅 聚焦新能源</view>
										<view class="des">中欧先制造出股票C</view>
									</view>
									<view class="msg-bottom">
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
									</view>
								</view>
							</view>
							<view class="youyiItem">
								<image style="width: 100rpx; margin-right: 20rpx; margin-top: 40rpx;" src="../../static/images/funds/toup2x.png" mode="widthFix"></image>
								<view class="message">
									<view class="msg-top">
										<view class="title">投研副总挂帅 聚焦新能源</view>
										<view class="des">中欧先制造出股票C</view>
									</view>
									<view class="msg-bottom">
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
										<view class="msgItem">
											<view class="interest">95.46<text>%</text></view>
											<view class="time">近一年</view>
										</view>
									</view>
								</view>
							</view>
							
						</swiper-item>
						<swiper-item>
											2
						</swiper-item>
						<swiper-item>
											3
						</swiper-item>
					</swiper>
				</view>
			</view>
			<fundTitle title="新发基金"></fundTitle>
			<view class="new-fund-wrap">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="new-item">
						<view class="title">
							华夏科创 50ETF
						</view>
						<view class="tags">
							<view class="tag-item">首批科创链接</view>
							<view class="tag-item">指数投资专家</view>
						</view>
						<view class="authormsg">
							<view class="author">
								<image src="../../static/images/funds/head2x.png" mode="widthFix" style="width: 50rpx;"></image>
								<text class="name">杨宇宁</text>
							</view>
							<view class="date">认购截止日 2021-4-6</view>
						</view>
					</view>
					<view class="new-item">
						<view class="title">
							华夏科创 50ETF
						</view>
						<view class="tags">
							<view class="tag-item">首批科创链接</view>
							<view class="tag-item">指数投资专家</view>
						</view>
						<view class="authormsg">
							<view class="author">
								<image src="../../static/images/funds/head2x.png" mode="widthFix" style="width: 50rpx;"></image>
								<text class="name">杨宇宁</text>
							</view>
							<view class="date">认购截止日 2021-4-6</view>
						</view>
					</view>
					<view class="new-item">
						<view class="title">
							华夏科创 50ETF
						</view>
						<view class="tags">
							<view class="tag-item">首批科创链接</view>
							<view class="tag-item">指数投资专家</view>
						</view>
						<view class="authormsg">
							<view class="author">
								<image src="../../static/images/funds/head2x.png" mode="widthFix" style="width: 50rpx;"></image>
								<text class="name">杨宇宁</text>
							</view>
							<view class="date">认购截止日 2021-4-6</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<fundTitle title="咨询要问"></fundTitle>
			<view class="newswrap">
				<view class="newsitem">
					<view class="left">
						<view class="title">来了来了！科创50ETF链接基金重磅新发</view>
						<view class="address">
							<view class="author">财经小白说</view>
							<view class="watch">1833浏览</view>
						</view>
					</view>
					<view class="right">
						<image src="../../static/images/funds/news1.png" mode="widthFix" style="width: 205rpx;"></image>
					</view>
				</view>
				<view class="newsitem">
					<view class="left">
						<view class="title">来了来了！科创50ETF链接基金重磅新发</view>
						<view class="address">
							<view class="author">财经小白说</view>
							<view class="watch">1833浏览</view>
						</view>
					</view>
					<view class="right">
						<image src="../../static/images/funds/news1.png" mode="widthFix" style="width: 205rpx;"></image>
					</view>
				</view>
				<view class="newsitem">
					<view class="left">
						<view class="title">来了来了！科创50ETF链接基金重磅新发</view>
						<view class="address">
							<view class="author">财经小白说</view>
							<view class="watch">1833浏览</view>
						</view>
					</view>
					<view class="right">
						<image src="../../static/images/funds/news1.png" mode="widthFix" style="width: 205rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import bigSearch from '../../components/bigSearch/bigSearch.vue'
	import fundTitle from '../../components/fundTitle/fundTitle.vue'
	export default {
		data() {
			return {
				navList: [
					{imgSrc: "../../static/images/funds/rank2x.png", title: "基金排行", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/hot2x.png", title: "人气热销", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/chart2x.png", title: "投顾组合", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/new2x.png", title: "新发基金", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/water2x.png", title: "固守+", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/wind2x.png", title: "投资风向", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/money2x.png", title: "货币基金", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/rw2x.png", title: "指数基金", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/up2x.png", title: "主体投资", path:"/pages/funds/rank"},
					{imgSrc: "../../static/images/funds/goal2x.png", title: "目标盈", path:"/pages/funds/rank"},
				],
				contentList1: [
					{title: "稳中进取", isActive: true},
					{title: "安稳增值", isActive: false},
					{title: "活期理财", isActive: false}
				],
				contentList2: [
					{title: "绩优股基", isActive: true},
					{title: "精选指数", isActive: false},
					{title: "布局海外", isActive: false}
				],
				currentIndex: 0,
				currentIndex1: 0,
			}
		},
		methods: {
			changeActive(index) {
				this.contentList1.map((item,index1) => {
					item.isActive = false
					if(index == index1) {
						item.isActive = true
					}
				})
				this.currentIndex = index
				
			},
			changeActive1(index) {
				this.contentList2.map((item,index1) => {
					item.isActive = false
					if(index == index1) {
						item.isActive = true
					}
				})
				this.currentIndex1 = index
				
			}
		},
		components:{
			bigSearch, fundTitle
		}
	}
</script>

<style lang="scss">
	.funds {
		background-color: #fefefe;
		.nav {
			height: 300rpx;
			padding: 0 25rpx;
			width: 100%;
			margin-top: 20rpx;
			// background-color: pink;
			.wrap {
				background-color: #fff;
				border-radius: 10rpx;
				height: 300rpx;
				box-shadow: 0rpx 0rpx 10rpx 1rpx rgba($color: #000000, $alpha: .1);
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;
				padding: 35rpx 0;
				.navitem {
					width: 20%;
					height: 100rpx;
					margin-bottom: 30rpx;
					// background-color: pink;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex-direction: column;
					font-size: 24rpx;
					color: #666;
					// padding-bottom: 20rpx;
				}
			}
		}
		.adv {
			margin-top: 35rpx;
			margin-bottom: 40rpx;
			padding: 0 25rpx;
		}
		.content {
			padding: 0 25rpx;
			.contentwrap {
				.itemwrap {
					display: flex;
					margin: 20rpx 0 20rpx 0;
					.titleitem {
						width: 150rpx;
						height: 50rpx;
						color: gray;
						text-align: center;
						line-height: 50rpx;
						border-radius: 5rpx;
						margin-right: 40rpx;
					}
					.active {
						background-color: $theme;
						color: #fff;
					}
				}
				.tabwrap {
					padding: 0 30rpx;
					margin-bottom: 30rpx;
					// border: 1px solid #ccc;
					box-shadow: 0rpx 0rpx 10rpx 1rpx rgba($color: #000000, $alpha: .1);
					.detailContent {
						
						.detailItem {
							height: 130rpx;
							border-bottom: 4rpx solid #fbfbfb;
							display: flex;
							align-items: center;
							.interest {
								margin-left: 20rpx;
								width: 240rpx;
								.title {
									color: #f85656;
									font-size: 38rpx;
									// margin-bottom: 15rpx;
									text {
										font-size: 28rpx;
									}
								}
								.time {
									color: #666;
								}
							}
							.tag {
								.des {
									font-size: 24rpx;
									color: gray;
									margin-top: 10rpx;
								}
							}
						}
					}
					//优益进取
					.youyiItem {
						height: 245rpx;
						border-bottom: 4rpx solid #f7f7f7;
						display: flex;
						.message {
							display: flex;
							flex-direction: column;
							flex: 1;
							.msg-top {
								flex: 1;
								margin-top: 25rpx;
								.title {
									font-size: 32rpx;
								}
								.des {
									color: gray;
								}
							}
							.msg-bottom  {
								flex: 1;
								display: flex;
								width: 100%;
								.msgItem {
									flex: 1;
									.interest {
										font-size: 36rpx;
										text {
											font-size: 26rpx;
										}
									}
									.time {
										color: gray;
									}
								}
								.msgItem:nth-child(1) {
									.interest {
										color: #f86161;
									}
									.time {
										color: #000;
									}
								}
								
							}
						}
					}
					
				}
			}
			.new-fund-wrap {
				padding:20rpx 0 35rpx 0;;
				.scroll-view_H {
					width: 100vw;
					white-space: nowrap;
					.new-item {
						width: 515rpx;
						height: 220rpx;
						margin: 20rpx 0 35rpx 0;
						padding: 30rpx 35rpx;
						margin-right: 20rpx;
						display: inline-block;
						border-radius: 20rpx;
						box-shadow: 0rpx 0rpx 10rpx 1rpx rgba($color: #000000, $alpha: .1);
						.title {
							font-size: 32rpx;
							font-weight: 500;
						}
						.tags {
							display: flex;
							.tag-item {
								// height: 30rpx;
								line-height: 30rpx;
								font-size: 24rpx;
								background-color: pink;
								padding: 5rpx 10rpx;
								border-radius: 5rpx;
								margin: 15rpx 0;
								margin-right: 10rpx;
							}
							.tag-item:nth-child(1) {
								background-color: #eaf1fe;
								color: #578ef3;
							}
							.tag-item:nth-child(2) {
								background-color: #fcf5ec;
								color: #e68e3c;
							}
						}
						.authormsg {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.author{
								display: flex;
								align-items: center;
								image {
									margin-right: 10rpx;
								}
								.name {
									color: #666;
									
								}
							}
							.date {
								color: gray;
								font-size: 24rpx;
							}
						}
						
					}
				}
				
			}
			.newswrap {
				margin-top: 25rpx;
				margin-bottom: 100rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 10rpx 1rpx rgba($color: #000000, $alpha: .1);
				padding: 0 30rpx;
				.newsitem {
					height: 210rpx;
					border-bottom: 4rpx solid #f4f4f4;
					padding:30rpx 0;
					display: flex;
					.left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-right: 10rpx;
						.title {
							font-size: 30rpx;
							font-weight: 400;
						}
						.address {
							display: flex;
							color: gray;
							.author {
								margin-right: 50rpx;
							}
						}
					}
				}
			}
		}
	}

</style>
